/** * 组件-头部 * **/
<template>
  <div class="header">
    <el-icon
      v-if="config.layout.shrink && config.layout.menuCollapse"
      class="unfold"
      @click="onMenuCollapse"
      size="{{sizes.value}}"
    >
      <Expand v-if="config.layout.menuCollapse" />
      <Fold v-else />
    </el-icon>
    <ul>
      <li class="lang">
        <el-dropdown>
          <img src="../assets/icon/language.png" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="item in config.lang.langArray"
                :key="item"
                @click="editDefaultLang(item.name)"
              >
                {{ item.value }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
      <li class="theme">
        <el-switch
          v-model="value"
          inline-prompt
          :active-icon="Sunny"
          :inactive-icon="Moon"
          style="--el-switch-on-color: #909399; --el-switch-off-color: #303133"
        />
      </li>
      <li class="magnify" @click="onFullScreen">
        <img src="../assets/icon/full.png" v-if="!state.isFullScreen" />
        <img src="../assets/icon/restore.png" v-else />
      </li>
      <li>
        <img class="userInfo-img" src="../assets/icon/head.png" alt="" />
        <el-dropdown trigger="click" @command="userInfoDropdown">
          <span class="el-dropdown-link"> mayahzou </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">
                {{ $t("dropdown.profile") }}
              </el-dropdown-item>
              <el-dropdown-item command="logout">
                {{ $t("dropdown.logout") }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { useUserInfo } from "../stores/userInfo";
import router from "../router";
import { Sunny, Moon } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import screenfull from "screenfull";
import { useConfig } from "../stores/config";
import { editDefaultLang } from "../lang";
import { useI18n } from "vue-i18n";
import { showShade } from "../utils/pageShade";
import { fontSizes } from "../utils/util";

const { t } = useI18n();

const config = useConfig();
const value = ref(true);
const userInfo = useUserInfo();
const state = reactive({
  isFullScreen: false,
});
const sizes = ref(fontSizes(20));
const userInfoDropdown = (command: string) => {
  switch (command) {
    case "profile":
      ElMessage({
        message: `${t("message.Personal information has not been developed")}`,
        type: "warning",
      });
      break;
    case "logout":
      ElMessageBox.confirm(`${t("message.Are you sure you want to log out")}`, {
        distinguishCancelAndClose: true,
        confirmButtonText: `${t("button.confirm")}`,
        cancelButtonText: `${t("button.cancel")}`,
      })
        .then(() => {
          userInfo.removeToken();
          ElMessage({
            type: "success",
            message: `${t("message.Log out successfully")}`,
          });
          router.push("/login");
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: `${t("message.Unlog out")}`,
          });
        });
      break;
    default:
      ElMessage.error(`${t("error.invalid")}`);
      break;
  }
};

const onFullScreen = () => {
  if (!screenfull.isEnabled) {
    ElMessage.warning(`${t("message.Layout not supporting full screen")}`);
    return false;
  }
  screenfull.toggle();
  screenfull.onchange(() => {
    state.isFullScreen = screenfull.isFullscreen;
  });
};
// 展开/收缩
const onMenuCollapse = () => {
  showShade("ba-aside-menu-shade", () => {
    config.setLayout("menuCollapse", true);
  });
  config.setLayout("menuCollapse", false);
};
</script>

<style scoped lang="less">
.header {
  border-bottom: 1px solid var(--el-border-color);
  width: 100%;
  height: 0.5rem;
  padding-top: 0.05rem;
  display: flex;

  ul {
    flex: 1;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: right;
    padding: 0;

    li {
      margin: auto 0.1rem;
      cursor: pointer;
      height: 100%;

      .el-dropdown-link {
        line-height: 0.28rem;
        font-size: 0.16rem;
        font-weight: 600;
      }

      img {
        height: 0.2rem;
        width: 0.2rem;
      }

      .userInfo-img {
        float: left;
        margin-right: 0.05rem;
        width: 0.28rem;
        height: 0.28rem;
      }
    }
  }
}

.unfold {
  align-self: center;
  color: #409eff;
}
</style>
